const path = require('path') // 引入 path 模块
const HtmlWebpackPlugin = require('html-webpack-plugin') // 引入处理 HTML 的插件
// 提取css
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 压缩css
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
//自动删除输出目录
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: { // 入口改为对象可以配置多个入口
        // 公共入口
        commonCSS: './src/js/common/commonCSS.js',
        dom: './src/js/common/dom.js',
        http: './src/js/common/http.js',
        utils: './src/js/common/utils.js',
        captcha: './src/lib/captcha/captcha-mini.js',
        //页面独有入口
        index: './src/js/index.js',
        login: './src/js/login.js',
        register: './src/js/register.js',
        adv: './src/js/adv.js',
        swiper: './src/lib/swiper/swiper-bundle.js',
        mine: './src/js/mine.js',
        'mine-edit': './src/js/mine-edit.js',
        course: './src/js/course.js',
        'course-detail': './src/js/course-detail.js',
        'sports-data': './src/js/sports-data.js',
        player:'./src/js/player.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name]-[hash:5].js',
    },
    mode: 'development',
    module: {
        rules: [
            { // 编译 CSS
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            { // 编译 Less
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader'
                ]
            },
            { // 编译图片
                test: /\.(png|jpeg|jpg|gif)$/,
                loader: 'url-loader',
                options: {
                    name: '[hash:16].[ext]',
                    limit: 2 * 1024 * 1024,
                    esModule: false, // 避免 NodeJS 和 ES6 模块化冲突（简单了解）
                }
            }, { // 加载 HTML 中的资源（图片、视频）
                test: /\.html$/,
                loader: 'html-loader'
            }, { // 处理字体图标
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file-loader',
                options: {
                    name: '[hash:16].[ext]',
                    outputPath: 'fonts'
                }
            },
            { // 把 ES6 的代码编译成 ES5
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    },

    plugins: [
        new HtmlWebpackPlugin({ // 注册
            template: './src/page/register.html',
            filename: 'register.html',
            chunks: ['register', 'commonCSS', 'dom', 'http', 'utils', 'captcha']
        }),
        new HtmlWebpackPlugin({ // 登录
            template: './src/page/login.html',
            filename: 'login.html',
            chunks: ['login', 'commonCSS', 'dom', 'http', 'utils']
        }),
        new HtmlWebpackPlugin({ // 广告页
            template: './src/page/adv.html',
            filename: 'adv.html',
            chunks: ['adv', 'commonCSS', 'dom']
        }),
        new HtmlWebpackPlugin({ // 首页
            template: './src/page/index.html',
            filename: 'index.html',
            chunks: ['index', 'utils', 'dom', 'commonCSS', 'swiper', 'http']
        }),
        new HtmlWebpackPlugin({ // 我的
            template: './src/page/mine.html',
            filename: 'mine.html',
            chunks: ['mine', 'utils', 'dom', 'commonCSS', 'http']
        }),
        new HtmlWebpackPlugin({ // 信息修改
            template: './src/page/mine-edit.html',
            filename: 'mine-edit.html',
            chunks: ['mine-edit', 'utils', 'dom', 'commonCSS', 'http']
        }),
        new HtmlWebpackPlugin({ // 课程列表
            template: './src/page/course.html',
            filename: 'course.html',
            chunks: ['course', 'commonCSS', 'dom', 'http', 'utils']
        }),

        new HtmlWebpackPlugin({ // 课程详情
            template: './src/page/course-detail.html',
            filename: 'course-detail.html',
            chunks: ['course-detail', 'commonCSS', 'dom', 'http', 'utils']
        }),

        new HtmlWebpackPlugin({ // 运动数据
            template: './src/page/sports-data.html',
            filename: 'sports-data.html',
            chunks: ['sports-data', 'commonCSS', 'dom', 'http', 'utils']
        }),
        new HtmlWebpackPlugin({ // 视频播放
            template: './src/page/player.html',
            filename: 'player.html',
            chunks: ['player', 'commonCSS', 'dom', 'http', 'utils']
        }),
        new MiniCssExtractPlugin({ // 提取css
            filename: 'css/[name]-[hash:5].css' // 重命名输出的css
        }),

        new OptimizeCssAssetsWebpackPlugin(),// 压缩css
        new CleanWebpackPlugin()//自动删除目录
    ],

    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        compress: true,
        port: 666,
        open: true,
        openPage: 'index.html'
    },
}